<!--
 * @Author: Haochen
 * @Date: 2021-12-07 17:58:25
 * @LastEditTime: 2021-12-13 15:09:36
 * @FilePath: \students-system\src\components\common\Pages.vue
-->
<template>
  <div class="pages">
    <!-- <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="$emit()"
      @prev-click="$emit('prevPage')"
      @next-click="$emit('nextPage')"
    >
    </el-pagination> -->

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="$emit('prevPage')"
      @next-click="$emit('nextPage')"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[3, 5, 7]"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- <button @click="$emit('firstPage')">首页</button>
    <button @click="$emit('prevPage')">上一页</button>
    <button @click="$emit('nextPage')">下一页</button>
    <button @click="$emit('lastPage')">尾页</button> -->
    <!-- <select @click="sendPageSize" v-model.lazy="pageSize">
      <option :value="3">3</option>
      <option :value="5">5</option>
      <option :value="7">7</option>
    </select> -->
  </div>
</template>

<script>
import bus from '../../views/students/bus';

export default {
  props: ['total', 'currentPage', 'pageSize'],
  data() {
    return {};
  },
  methods: {
    sendPageSize() {
      bus.$emit('sendPageSize', this.pageSize);
    },
    // * 切换每页多少条
    handleSizeChange(val) {
      bus.$emit('handleSizeChange', val);
    },
    // * 跳转页面
    handleCurrentChange(val) {
      bus.$emit('handleCurrentChange', val);
    },
  },
};
</script>

<style scoped>
.pages {
  width: 965px;
  text-align: center;
}

button {
  width: 75px;
  height: 30px;
  margin: 0 10px;
  border: none;
  border-radius: 30px;
}

button:hover {
  cursor: pointer;
}
</style>
